<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
  <!-- <link rel="stylesheet" href="static/lib/bootstrap/css/bootstrap.min.css"> -->
  <link src="static/css/bs-table.css"></link>
  <link rel="stylesheet" type="text/css" href="static/css/reset.css">
  <link rel="stylesheet" type="text/css" href="static/css/heatmap.css">
  <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=OmnSiQFfgRDGaEMuk6PH79wSnVezypor&services=&t=20171031174121"></script>
  <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
  <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
  <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
  <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>

  <title>Document</title>
</head>
<body>
  <div class="right-menu">
    <div class="menu-btn">
      <span class="glyphicon glyphicon-send"></span>
    </div>
    <div class="menu-btn">
      <span class="glyphicon glyphicon-home"></span>
    </div>
  </div>
  <div class="container map-container">
    <div class="row data-info">
      <div class="data-info">
        <div class="  col-xs-4">
          <div class="data-block">
            <span class="data-remarker">在线人数</span>
            <span id="allOnlineCount" class="data-value">115</span>
          </div>
        </div>
        <div class="  col-xs-4">
          <div class="data-block">
            <span class="data-remarker">人数峰值</span>
            <span id="topCount" class="data-value">5123</span>
          </div>
        </div>
        <div class="  col-xs-4">
          <div class="data-block">
            <span class="data-remarker">近五分钟人数</span>
            <span id="last5minCount" class="data-value">225</span>
          </div>
        </div>
      </div>

    </div>
    <div class="row map-bar">
      <div class="col-xs-12">
        <div class="map-box">
          <div id="heatmap">
            <h1 style="color:white"></h1>
          </div>
        </div>
      </div>
      <!-- <div class="col-xs-4">
        <div class="panel panel-box panel-default">
          <div class="panel-heading">
            盒子列表
          </div>
          <div class="panel-body">
            <ul class="list-group">
              <li class="list-group-item"><a href="#">盒子1</a><i class="suffix">人在线</i><i class="count">1</i></li>
              <li class="list-group-item"><a href="#">盒子2</a><i class="suffix">人在线</i><i class="count">1</i></li>
              <li class="list-group-item"><a href="#">盒子3</a><i class="suffix">人在线</i><i class="count">1</i></li>
              <li class="list-group-item"><a href="#">盒子4</a><i class="suffix">人在线</i><i class="count">1</i></li>
              <li class="list-group-item"><a href="#">盒子5</a><i class="suffix">人在线</i><i class="count">1</i></li>
              <li class="list-group-item"><a href="#">盒子6</a><i class="suffix">人在线</i><i class="count">1</i></li>
              <li class="list-group-item"><a href="#">盒子7</a><i class="suffix">人在线</i><i class="count">1</i></li>
              <li class="list-group-item"><a href="#">盒子8</a><i class="suffix">人在线</i><i class="count">1</i></li>
              <li class="list-group-item"><a href="#">盒子9</a><i class="suffix">人在线</i><i class="count">1</i></li>
              <li class="list-group-item"><a href="#">盒子20</a><i class="suffix">人在线</i><i class="count">1</i></li>
              <li class="list-group-item"><a href="#">盒子13</a><i class="suffix">人在线</i><i class="count">1</i></li>
              <li class="list-group-item"><a href="#">盒子14</a><i class="suffix">人在线</i><i class="count">1</i></li>

            </ul>
          </div>
        </div>
      </div> -->
    </div>
    <div class="row">
      <div class="panel-body" style="padding-bottom:0px;">
        <div class="panel panel-default">
            <div class="panel-heading">查询条件</div>
            <div class="panel-body">
                <form id="formSearch" class="form-horizontal">
                    <div class="form-group" style="margin-top:15px">
                        <label class="control-label col-sm-1" for="txt_search_departmentname">盒子名称</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" id="box_search_text">
                        </div>
                        <div class="col-sm-4" style="text-align:left;">
                            <button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary">查询</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <table id="box_tb"></table>
    </div>
    </div>
  </div>
  <!-- <script src="static/lib/jquery/jquery-2.1.4.min.js"></script> -->
  <!-- <script src="static/lib/bootstrap/js/bootstrap.min.js"></script> -->
  <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="static/js/bs-table.js"></script>
  <script src="static/js/bs-table-cn.js"></script>
  <script src="http://cdn-hangzhou.goeasy.io/goeasy.js "></script>
  <script src="static/js/sa-plug-in.js"></script>
  <script src="static/js/heatmap.js"></script>
</body>
</html>